<template>
  <el-form ref="form" :model="formData" :rules="rules" label-width="80px" :inline="true" label-position="top">
    <!-- <el-form-item label="名称" prop="assistantId" style="width:48%;">
      <el-input v-model="formData.assistantId" placeholder="请输入名称" />
    </el-form-item> -->
    <el-form-item label="模式" prop="streamMode" style="width:48%;">
      <el-select v-model="formData.streamMode" multiple placeholder="请选择">
        <el-option v-for="item in streamMode" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-divider content-position="left">添加数据</el-divider>
    <el-form-item label="input.docs（数组格式）" style="width:100%;">
      <el-input v-model="formData.docsStr" type="textarea" :disabled="isDis" placeholder="['文字1','文字2','文字3']" :autosize="{ minRows: 5, maxRows: 20 }" />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'AddDataForm',
  props: ['initialData', 'isDis'],
  data() {
    return {
      formData: { ...this.initialData },
      streamMode: [{ value: 'debug', label: "debug", raw: { listClass: '' } }, { value: 'messages', label: "messages", raw: { listClass: '' } }],
      rules: {
        streamMode: [
          { required: true, message: '请选择模式', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    initialData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.formData = { ...newVal }
      }
    }
  },
  methods: {
    getFormData() {

      return {
        ...this.formData,
        input: { docs: this.formData.docsStr || '[]' }
      }
    },
    validateForm() {
      return this.$refs.form.validate()
    }
  }
}
</script>